<template>
	<view class="container">
		<!-- 蓝色头部 -->
		<view class="header">
			<view class="nav-bar">
				<uni-icons type="left" size="24" color="#fff" @click="goBack"></uni-icons>
				<text class="nav-title">预约成功</text>
				<!-- <view class="nav-right">
					<view class="nav-icon-dots">
						<view class="nav-icon-dot"></view>
						<view class="nav-icon-dot"></view>
						<view class="nav-icon-dot"></view>
					</view>
					<view class="nav-icon-target">
						<view class="nav-icon-circle">
							<view class="nav-icon-inner-circle"></view>
						</view>
					</view>
				</view> -->
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content">
			<!-- 成功图标 -->
			<view class="success-icon">
				<uni-icons type="checkmarkempty" size="80" color="#fff"></uni-icons>
			</view>

			<!-- 成功文字 -->
			<text class="success-text">预约成功</text>

			<!-- 预约编号 -->
			<text class="appointment-number">预约编号: {{ appointmentNumber }}</text>

			<!-- 按钮区域 -->
			<view class="button-group">
				<view class="btn btn-primary" @click="goToHome">返回首页</view>
				<view class="btn btn-secondary" @click="goToDetails">预约详情</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	// 预约编号
	const appointmentNumber = ref('')

	// 生成预约编号（实际应该从后端获取）
	const generateAppointmentNumber = () => {
		// 从路由参数获取，如果没有则生成一个随机编号
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const options = currentPage.options || {}

		if (options.number) {
			appointmentNumber.value = options.number
		} else {
			// 生成一个随机编号（实际应该从接口获取）
			const timestamp = Date.now()
			appointmentNumber.value = timestamp.toString().slice(-15)
		}
	}

	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}

	// 返回首页
	const goToHome = () => {
		uni.reLaunch({
			url: '/pages/index/index'
		})
	}

	// 预约详情
	const goToDetails = () => {
		// TODO: 跳转到预约详情页面
		uni.reLaunch({
			url: '/pages/repair/fjmd/mdxq/ljyy/yyxq/index'
		})
	}

	onMounted(() => {
		generateAppointmentNumber()
	})
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	/* 蓝色头部 */
	.header {
		width: 100%;
		background-color: #3486fe;
		padding-top: var(--status-bar-height);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		height: calc(var(--status-bar-height) + 250rpx);
	}

	.nav-bar {
		display: flex;
		/* align-items: center; */
		justify-content: space-between;
		padding: 20rpx 30rpx;
		height: 250rpx;
		position: relative;
	}

	.nav-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		pointer-events: none;
	}

	.nav-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-left: auto;
	}

	.nav-icon-dots {
		display: flex;
		gap: 8rpx;
	}

	.nav-icon-dot {
		width: 8rpx;
		height: 8rpx;
		background-color: #fff;
		border-radius: 50%;
	}

	.nav-icon-target {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-icon-circle {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-icon-inner-circle {
		width: 16rpx;
		height: 16rpx;
		background-color: #fff;
		border-radius: 50%;
	}

	/* 内容区域 */
	.content {
		position: absolute;
		top: calc(var(--status-bar-height) + 90rpx);
		left: 40rpx;
		right: 40rpx;
		bottom: 40rpx;
		background-color: #fff;
		border-radius: 24rpx;
		padding: 60rpx 30rpx 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		overflow-y: auto;
		z-index: 110;
		height: 800rpx;
	}

	/* 成功图标 */
	.success-icon {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background: linear-gradient(180deg, #72b5ff 0%, #3486fe 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 50rpx;
		margin-top: 20rpx;
	}

	/* 成功文字 */
	.success-text {
		font-size: 42rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}

	/* 预约编号 */
	.appointment-number {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 100rpx;
	}

	/* 按钮区域 */
	.button-group {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		align-items: center;
	}

	.btn {
		width: 100%;
		max-width: 590rpx;
		height: 88rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	.btn-primary {
		background-color: #3486fe;
		color: #fff;
		box-shadow: 0 8rpx 16rpx rgba(52, 134, 254, 0.2);
	}

	.btn-secondary {
		background-color: #e0e0e0;
		color: #333;
	}
</style>